<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>全选练习</title>

    <script>
        window.onload = function () {

            /*1-全选按钮*/

            var checkedAllBtn = document.getElementById("checkedAllBtn");
            checkedAllBtn.onclick = function () {

                var items = document.getElementsByName("items");
                for (var i = 0; i < items.length; i++) {

                    //通过多选框的checked属性可以获取或设置多选框的选中状态

                    //设置四个多选框变成选中状态
                    items[i].checked = true;
                }
                var checkedAllBox = document.getElementById("checkedAllBox");
                checkedAllBox.checked = true;


            }


            /*2-全不选按钮*/

            var checkedNoBtn = document.getElementById("checkedNoBtn");
            checkedNoBtn.onclick = function () {

                var items = document.getElementsByName("items");
                for (var i = 0; i < items.length; i++) {

                    //通过多选框的checked属性可以获取或设置多选框的选中状态

                    //设置四个多选框变成不选中状态
                    items[i].checked = false;
                }

                var checkedAllBox = document.getElementById("checkedAllBox");
                checkedAllBox.checked = false;

            }


            /*3-反选按钮*/

            var checkedRevBtn = document.getElementById("checkedRevBtn");
            checkedRevBtn.onclick = function () {
                var items = document.getElementsByName("items");

                var checkedAllBox = document.getElementById("checkedAllBox");
                checkedAllBox.checked = true;

                for (var i = 0; i < items.length; i++) {

                    /*
                    if (items[i].checked)//默认值是ture
                    {
                        items[i].checked = false;
                    } else {
                        items[i].checked = true;
                    }
                    */

                    items[i].checked = !items[i].checked;

                    if (!items[i].checked) {
                        checkedAllBox.checked = false;
                    }
                }
            }


            /*4-提交按钮*/

            var sendBtn = document.getElementById("sendBtn");
            sendBtn.onclick = function () {
                var items = document.getElementsByName("items");
                for (var i = 0; i < items.length; i++) {
                    if (items[i].checked) {
                        alert(items[i].value);
                    }
                }

            }


            /*5-全选/全不选 多选框*/

            var checkedAllBox = document.getElementById("checkedAllBox");
            checkedAllBox.onclick = function () {
                var items = document.getElementsByName("items");
                for (var i = 0; i < items.length; i++) {
                    items[i].checked = this.checked;
                }
            }


            /*6-items*/
            var items = document.getElementsByName("items");

            for (var i = 0; i < items.length; i++) {
                items[i].onclick = function () {
                    var checkedAllBox = document.getElementById("checkedAllBox");

                    checkedAllBox.checked = true;

                    for (var j = 0; j < items.length; j++) {
                        //判断四个多选框是否全选
                        //只有有一个没选中则不是全选
                        if (!items[j].checked) {
                            //一旦进入判断，则证明不是全选状态
                            checkedAllBox.checked = false;

                            break;
                        }
                    }
                }
            }


        };
    </script>
</head>

<body>
    <form method="POST" action="">
        你的爱好运动是？<input type="checkbox" id="checkedAllBox" />全选/全不选

        <br />
        <input type="checkbox" name="items" value="篮球" />篮球
        <input type="checkbox" name="items" value="足球" />足球
        <input type="checkbox" name="items" value="羽毛球" />羽毛球
        <input type="checkbox" name="items" value="乒乓球" />乒乓球
        <br />
        <input type="button" id="checkedAllBtn" value="全  选" />
        <input type="button" id="checkedNoBtn" value="全不选" />
        <input type="button" id="checkedRevBtn" value="反  选" />
        <input type="button" id="sendBtn" value="提  交" />


    </form>
</body>

</html>